<!--
 * @Description: 
 * @Author: shizhe
 * @Date: 2022-03-28 20:09:26
 * @LastEditTime: 2022-04-18 12:43:34
 * @LastEditors: shizhe
 * @Reference: 
-->
<template>
  <div id="su_detail">
    <div>
      <div class="title">
        <span @click="goIndex" style="cursor: pointer">供应商</span>
        &nbsp;&nbsp;>&nbsp;&nbsp;供应商主页
      </div>
    </div>
    <div class="detail_header">
      <header class="logo_box">
        <div class="logo">
          <el-image :src="params.logo || url"></el-image>
        </div>

        <div class="logo_right">
          <p class="conpany_name">{{ params.enterpriseName }}</p>
          <p style="display: flex">
            <span class="company_time">入驻平台{{ timeyear }}年</span>
            <span class="company_score">综合评分:{{ params.comprehensiveScore }}</span>
          </p>
          <p class="conpany_num">
            <label>
              <span class="num_label">中标数量:</span>
              <span class="num_value">{{ params.bidNumber }}</span>
              <span style="color: #fc0d13">个</span>
            </label>
            <label>
              <span class="num_label">签约数量:</span>
              <span class="num_value" style="color: #30c776">{{ params.contractNumber }}</span>
              <span style="color: #30c776">单</span>
            </label>
            <label style="border: none">
              <span class="num_label">签约金额:</span>
              <span class="num_value" style="color: #fd9e1a">{{ params.contractAmount }}</span>
              <span style="color: #fd9e1a">万元</span>
            </label>
          </p>
        </div>
      </header>
      <main style="margin-top: 20px">
        <div class="main_box">
          <label class="con_label">
            <span class="label_item">营业执照注册号:</span>
            <div class="item_value">
              <tool-tip-node :oneLine="true" :value="params.companyCode || '--'" key="yyzz"></tool-tip-node>
            </div>
          </label>
          <label class="con_label">
            <span class="label_item">注册资金:</span>
            <div class="item_value">
              <tool-tip-node
                key="zczj"
                :oneLine="true"
                :value="params.registeredCapital ? params.registeredCapital + '万元' : '--'"
              ></tool-tip-node>
            </div>
          </label>
          <label class="con_label">
            <span class="label_item">企业地址:</span>
            <div class="item_value" style="width: 274px">
              <tool-tip-node key="qydz" :oneLine="true" :value="params.address || '--'"></tool-tip-node>
            </div>
          </label>
          <label class="con_label">
            <span class="label_item">法人姓名:</span>
            <div class="item_value">
              <tool-tip-node key="frxm" :oneLine="true" :value="params.legalPerson || '--'"></tool-tip-node>
            </div>
          </label>
          <label class="con_label">
            <span class="label_item">企业性质:</span>
            <div class="item_value">
              <tool-tip-node key="qyxz" :oneLine="true" :value="filterNature(params.enterpriseNature)"></tool-tip-node>
            </div>
          </label>
          <label class="con_label">
            <span class="label_item">业务联系方式:</span>
            <div class="item_value">
              <tool-tip-node key="ywlxfs" :oneLine="true" :value="params.phone || '--'"></tool-tip-node>
            </div>
          </label>
        </div>
        <div class="main_bom">
          <label class="con_label" style="line-height: 18px">
            <span class="label_item">企业简介:</span>
            <div class="item_value" style="line-height: 18px; height: 38px">
              <tool-tip-node
                :oneLine="false"
                :value="params.introduce || '--'"
                :isBtn="true"
                :nodes="'qyjj'"
                @dialogOpen="dialogOPen"
              ></tool-tip-node>
            </div>
          </label>
          <label class="con_label">
            <span class="label_item">经营范围:</span>
            <div class="item_value" style="height: 14px">
              <tool-tip-node
                :oneLine="true"
                :value="params.businessScope || '--'"
                :isBtn="true"
                :nodes="'jyfw'"
                @dialogOpen="dialogOPen"
              ></tool-tip-node>
            </div>
          </label>
          <label class="con_label" style="margin-bottom: 0">
            <span class="label_item">主营品牌:</span>
            <div class="item_value" style="height: 14px">
              <tool-tip-node
                :oneLine="true"
                :value="params.mainBrand || '--'"
                :isBtn="true"
                :nodes="'zypp'"
                @dialogOpen="dialogOPen"
              ></tool-tip-node>
            </div>
          </label>
        </div>
      </main>
    </div>
    <div class="detail_content">
      <div class="tab_nav">
        <keep-alive>
          <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="评价信息" name="1">
              <company-square :id="enterpriseId" :name="params.enterpriseName"></company-square>
            </el-tab-pane>
            <el-tab-pane label="交易信息" name="2">
              <trading-information :id="enterpriseId"></trading-information>
            </el-tab-pane>
            <el-tab-pane label="供应产品" name="3">
              <company-product :id="enterpriseId"></company-product>
            </el-tab-pane>
            <el-tab-pane label="企业荣誉" name="4">
              <honor-company :value="infoFrom.enterpriseHonor"></honor-company>
            </el-tab-pane>
            <el-tab-pane label="企业相册" name="5">
              <photo-company :id="enterpriseId"></photo-company>
            </el-tab-pane>
          </el-tabs>
        </keep-alive>
      </div>
    </div>
    <el-dialog
      width="765px"
      :center="true"
      :title="title"
      :close-on-click-modal="false"
      :visible.sync="visiable"
      :before-close="closeDialog"
      v-if="visiable"
    >
      {{ value }}
    </el-dialog>
  </div>
</template>

<script>
import CompanySquare from './square'
import CompanyProduct from './product'
import ToolTipNode from '../../components/ToolTipNode.vue'
import HonorCompany from './honor'
import PhotoCompany from './photo'
import TradingInformation from './trading'
export default {
  components: { ToolTipNode, CompanySquare, TradingInformation, HonorCompany, PhotoCompany, CompanyProduct },
  data() {
    return {
      activeName: '1',
      params: {},
      timeyear: '',
      url: require('@/assets/images/building.png'),
      infoFrom: {},
      value: '',
      title: '',
      visiable: false,
      enterpriseId: null
    }
  },
  created() {
    this.enterpriseId =
      JSON.stringify(this.$route.params) != '{}'
        ? this.$route.params.id
        : JSON.parse(localStorage.getItem('supplierID'))
    this.getSupplierDetail()
    this.getDetail()
  },
  methods: {
    filterNature(val) {
      const obj = {
        0: '贸易商',
        1: '代理商',
        2: '生产商'
      }
      return obj[val] || '--'
    },
    getSupplierDetail() {
      this.$https({
        url: '/supplier/getDetail?enterpriseId=' + this.enterpriseId,
        method: 'post'
      })
        .then(res => {
          if (res.code == 0) {
            this.params = res.data
            // 获取入驻平台时的时间戳
            const oldTime = new Date(this.params.createTime).getTime()
            // 获取当前时间戳
            const newTime = new Date().getTime()
            // 计算入驻平台多久了
            this.timeyear = ((newTime - oldTime) / 31536000000).toFixed(1)
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    getDetail() {
      this.$https({
        method: 'post',
        url: '/enterpriseInfo/getDetail?enterpriseId=' + this.enterpriseId
      })
        .then(res => {
          if (res.code == 0) {
            this.infoFrom = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    dialogOPen(value, label) {
      if (label == 'qyjj') {
        this.title = '企业简介'
      } else if (label == 'zypp') {
        this.title = '主营品牌'
      } else {
        this.title = '经营范围'
      }
      this.value = value
      this.visiable = true
    },
    closeDialog(done) {
      this.value = ''
      this.title = ''
      done()
    },
    goIndex() {
      this.$router.replace('/index/supplier')
      localStorage.removeItem('supplierID')
    }
  },
  beforeDestroy() {
    // localStorage.removeItem('params')
  }
}
</script>
<style lang="less" scoped>
#su_detail {
  width: 1200px;
  margin-top: 30px;
  .title {
    // padding: 30px 0 20px 16px;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }
  .detail_header {
    border: 1px solid #dbdbdb;
    padding: 20px;
    margin-bottom: 30px;
    .logo_box {
      display: flex;
      .logo {
        width: 117px;
        height: 117px;

        background: #f8f8f8;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .logo_right {
        margin-left: 20px;
        width: calc(100% - 137px);
      }
      .conpany_name {
        font-size: 20px;
        color: #333;
        line-height: 20px;
        font-weight: 500;
        margin-bottom: 15px;
      }
      .conpany_num {
        margin-top: 20px;
        border-top: 1px dashed #d6d6d6;
        border-bottom: 1px dashed #d6d6d6;
        padding: 6px 0;
        label {
          display: inline-block;
          // padding: 10px 40px 10px 15px;
          padding: 0 40px;
          border-right: 1px solid #d6d6d6;
          font-size: 14px;
        }
        .num_label {
          font-size: 14px;
          color: #333;
          margin-right: 10px;
        }
        .num_value {
          color: #fc0d13;
          font-size: 18px;
        }
      }
      .company_time,
      .company_score {
        color: #fff;
        font-size: 14px;
        padding: 2px 7px;
      }
      .company_time {
        background-color: #348af9;
      }
      .company_score {
        margin-left: 14px;
        background: #fa7355;
      }
    }
    .con_label {
      display: flex;
      width: 33.3%;
      color: #666;
      font-size: 14px;
      line-height: 14px;
      margin-bottom: 20px;
    }
    .label_item {
      display: inline-block;
      width: 102px;
      text-align: right;
      margin-right: 10px;
    }
    .item_value {
      width: calc(100% - 112px);
      color: #333;
      font-size: 14px;
    }
    .main_box {
      display: flex;
      flex-wrap: wrap;
    }
    .main_bom {
      .con_label {
        width: 100%;
      }
    }
    .introduce {
      max-height: 38px;
    }
  }
  .detail_content {
    padding-bottom: 40px;
  }
}
</style>
